<template>

    <div class="my-afterorder">
            	<div class="address">
			<div>
				<p>您当前所在位置</p>
				<router-link to="/" class="link">月结消费账单明细</router-link>
			</div>
		</div>
        <div class="mo-main">
       
        <!--    <div>
                <el-form
                        :inline="true"
                        :model="formInline"
                        class="demo-form-inline"
                >

    开始时间
    <el-date-picker
      v-model="starttime"
      type="date"
      placeholder="选择日期"
      value-format="yyyy-MM-dd">
    </el-date-picker>

    结束时间
    <el-date-picker
      v-model="endtime"
      align="right"
      type="date"
      placeholder="选择日期"

      value-format="yyyy-MM-dd">
    </el-date-picker>

                    
                  订单编号
                    <el-form-item>
                        <el-input
                                v-model="formInline.orderSn"
                                placeholder="请输入订单编号"
                        ></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button
                                type="primary"
                                @click="onSubmit()"
                        style="background-color: #2d2d2d">查询
                        </el-button>
                    </el-form-item>
                </el-form>
            </div> -->
            <div >
                <!--面料下单的数据-->
                <el-table
                  
                        :data="tableData"
                        style="width: 100%"
                        :header-cell-style="{ background: '#333333', color: ' #F9D532' }"
                >
                    <el-table-column
                            prop="id"
                            type="index"
                            label="序号"
                    >
                    </el-table-column>

                  </el-table-column>
                            <el-table-column
                          prop="orderSn"
                          label="订单编号"
                  >
                  </el-table-column>
                  
                  <el-table-column
                          prop="orderTypeString"
                          label="下单类型"
                  >
                  </el-table-column>
                  <el-table-column
                          prop="money"
                          label="订单月结花费金额"
                  >
                  </el-table-column>
                  			   
                  <el-table-column
                  
                          prop="createTimeString"
                          label="生成时间"
                  >
                  </el-table-column>

                 <el-table-column             
                          prop="isAfterString"
                          label="订单类型"
                  >
                  </el-table-column>

          <!--          <el-table-column
                            fixed="right"
                            label="操作"
                    >
                        <template slot-scope="props">
                            <el-button
                                    @click="see_afterdetail(props.row.id)"
                                    type="text"
                                    size="small"
                                    :style="{color: '#C29C0F'}"
                            >查看售后记录
                            </el-button>
                        </template>
                    </el-table-column> -->
                </el-table>
                <!--面料下单的数据结束-->


            </div>

            <div class="mom-pagination">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="pageDetail.total"
                        :page-size="10"
                        @next-click="currentPage+=1,handleCurrentChange"
                        @prev-click="currentPage-=1,handleCurrentChange"
                        @current-change="handleCurrentChange"
                >
                </el-pagination>
            </div>
        </div>

        <el-dialog
                title="售后"
                :visible.sync="ShouhouVisible"
                width="466px"
                :close-on-click-modal="false"
        >
            <el-select
                    v-model="ruleForm.type"
                    placeholder="请选择售后方式！"
                    :style="{marginBottom: '20px', width: '70%'}"
            >
                <el-option
                        label="换货"
                        value="换货"
                >
                </el-option>
                <el-option
                        label="退货"
                        value="退货"
                >
                </el-option>
            </el-select>
            <el-input
                    type="textarea"
                    :rows="6"
                    placeholder="请填写售后原因"
                    v-model="ruleForm.why"
                    :style="{marginBottom: '20px', width: '100%'}"
            >
            </el-input>

            <el-input
                    v-model="ruleForm.num"
                    placeholder="请填写物流单号/物流单号只存在选择换货后才能出现"
            ></el-input>
            <span
                    slot="footer"
                    class="dialog-footer"
            >
        <el-button @click="ShouhouVisible = false">取 消</el-button>
        <el-button
                type="primary"
                @click="handleSubmit"
        >确 定</el-button>
      </span>
        </el-dialog>
    </div>
</template>

<script>

    import {getAction} from "../../api/manage";

    export default {
        created() {
			this.id=this.$route.query.billid;
            this.getOrder()
        },
        data() {
            return {
                    starttime:'',
                    endtime:'',
                     token:localStorage.getItem("token"),
                mianliao:true,
                geding:false,
                tuanding:false,
                pageDetail: {},
                orderType: 0,
                url: {
                    list: "/WebMonthStatement/getsmallWebMonthStatement"
                },
                activeName: '3',
                optionsList: [
                    {sign: "options001", txt: "已完成"},
                    {sign: "options002", txt: "发货中"},
                    {sign: "options003", txt: "已接单"},
                    {sign: "options004", txt: "已拒绝"},
                    {sign: "options005", txt: "制作中"},
                ],
                ShouhouVisible: false,
                ruleForm: {
                    type: "",
                    why: "",
                    num: "",
                },
                formInline: {
                    orderSn: "",
                    region: "",
                    date: "",
                },
                tableData: [

                ]
            };
        },
        methods: {
                see_afterdetail(id){
                     this.$router.push({path:'/MyAfterSales/AfterSaleFabric',query: {id:id}})
                },
                see_afterdetail2(id){
                     this.$router.push({path:'/MyAfterSales/AfterSaleGeding',query: {id:id}})
                },
                see_afterdetail3(id){
                     this.$router.push({path:'/MyAfterSales/AfterSaleGroup',query: {id:id}})
                },
            // 请求各种订单(获取当前选项卡的数据列表)
            getOrder() {
				getAction(domain.publicUrl + this.url.list, {
				    'billid': this.id 	
				}).then(res => {
				    this.tableData = res.data.data.records
				      this.pageDetail = res.data.data
				})
              
            },
            // 切换标签卡
            handleClick(tab, event) {
                this.orderType = tab.name
                this.getOrder()
            },
            // 查询按钮
            onSubmit() {
                getAction(domain.publicUrl + this.url.list, {
                    'token': this.token,
                    'orderType': this.orderType,
                     'orderSn':this.formInline.orderSn,
                     'starttime':this.starttime,
                     'endtime':this.endtime
                }).then(res => {
                    this.tableData = res.data.data.records
                    this.pageDetail = res.data.data
                })
            },
            handleSubmit() {
            },
            // 分页触发请求
            handleCurrentChange(val) {
                this.currentPage = val
                this.onSubmit()
            }
        },
    };
</script>

<style lang="scss" scoped>
    .my-afterorder {
        box-sizing: border-box;
        padding: 30px 90px;

        .mo-main {
            background: #fff;
            box-sizing: border-box;
            padding: 20px 40px 30px;

            .mom-pagination {
                text-align: center;
                margin: 35px 0 0;
            }
        }
    }
</style>
